<template>
  <div class="container-box">
    <!-- 头部 -->
    <van-nav-bar fixed>
      <!-- 显示定位 -->
      <template #left>
        <van-icon name="arrow-left" @click="onClickLeft" />
        <span>返回</span>
      </template>
      <!-- 查询 -->
      <template #title>
        注册
      </template>
    </van-nav-bar>
    <!-- 表单 -->
    <van-form v-if="showForm">
      <van-field v-model="mobile" placeholder="请输入手机号" />
      <div style="margin: 16px;">
        <van-button
          block
          type="warning"
          class="yzmBtn"
          :disabled="disabled"
          @click="yzmBtn"
          >{{ disabled ? time + 's后重新获取' : '获取验证码' }}</van-button
        >
      </div>
      <div class="voice">
        获取语音验证码?
      </div>
      <van-field v-model="code" placeholder="请输入验证码" />
      <div style="margin: 16px;">
        <van-button block type="warning" class="next" @click="nextBtn"
          >下一步</van-button
        >
      </div>
    </van-form>
    <van-form v-else>
      <van-field v-model="password" placeholder="请输入密码" />
      <van-field v-model="password" placeholder="请确认密码" />

      <div style="margin: 16px;">
        <van-button block type="warning" class="next" @click="comfirmBtn"
          >完成</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mobile: '',
      code: '',
      disabled: false,
      time: 60,
      showForm: true,
      password: '',
      password2: ''
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    yzmBtn() {
      this.disabled = true
      this.setTime()
    },
    setTime() {
      // 启用按钮定时器
      const timeOut = setInterval(() => {
        this.time--
        if (this.time <= 0) {
          this.disabled = false
          this.time = 60
          clearInterval(timeOut)
        }
      }, 1000)
    },
    nextBtn() {
      // 下一步
      this.showForm = false
    },
    comfirmBtn() {
      // 完成
      console.log('完成完成完成')
    }
  }
}
</script>

<style lang="less" scoped>
.container-box {
  background-color: #f5f5f5;
  padding-top: 46px;
  height: 100%;
  .van-nav-bar {
    background: -webkit-linear-gradient(top, #fb7c71, #f96366);
    color: #fff;
    span {
      font-size: 0.2rem;
    }
    .van-icon {
      color: #fff;
    }
    /deep/.van-nav-bar__title {
      color: #fff;
    }
  }
  .yzmBtn {
    background-color: #42c5b1;
    color: #fff;
    border: 0;
  }
  .next {
    background-color: #f96366;
    color: #fff;
    border: 0;
  }
  .voice {
    font-size: 0.2rem;
    text-decoration: underline;
    color: #2440b3;
    text-align: right;
    padding: 16px;
    padding-top: 0;
  }
}
</style>
